<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12状态模式</title>
  </head>
  <body>
    <p>
      状态模式是一种非同寻常的优秀模式，它也许是解决某些需求场景的最好方法。虽然状态模
      式并不是一种简单到一目了然的模式（它往往还会带来代码量的增加），但你一旦明白了状态模
      式的精髓，以后一定会感谢它带给你的无与伦比的好处。
      状态模式的关键是区分事物内部的状态(来回切换状态)，事物内部状态的改变往往会带来事物的行为改变!!!
    </p>

    <p>
      策略模式和状态模式的相同点是，它们都有一个上下文、一些策略或者状态类，上下文把请 求委托给这些类来执行。
      它们之间的区别是策略模式中的各个策略类之间是平等又平行的，它们之间没有任何联系，
      所以客户必须熟知这些策略类的作用，以便客户可以随时主动切换算法；而在状态模式中，状态
      和状态对应的行为是早已被封装好的，状态之间的切换也早被规定完成，“改变行为”这件事情
      发生在状态模式内部。对客户来说，并不需要了解这些细节。这正是状态模式的作用所在。
    </p>
    <script>
      // OffLightState： 关灯
      var OffLightState = function (light) {
        this.light = light;
      };

      OffLightState.prototype.buttonWasPressed = function () {
        console.log('弱光'); // offLightState 对应的行为
        // this.light.setState(this.light.weakLightState); // 切换状态到 weakLightState
      };

      var Light = function () {
        this.offLightState = new OffLightState(this);
        console.log(this);
        // this.button = null;
      };

      // Light.prototype.init = function () {
      //   var button = document.createElement('button'),
      //     self = this;

      //   this.button = document.body.appendChild(button);
      //   this.button.innerHTML = '开关';
      //   this.currState = this.offLightState; // 设置当前状态
      //   this.button.onclick = function () {
      //     self.currState.buttonWasPressed();
      //   };
      // };
      // Light.prototype.setState = function (newState) {
      //   this.currState = newState;
      // };

      // 现在可以进行一些测试：
      var light = new Light();
      console.log('light ', light);

      // light.init();
    </script>
  </body>
</html>
